/* 这是为了处理路径而导入了node.js内置模块 */
const path = require("path"); 

const HtmlWebpackPlugin = require('html-webpack-plugin');

let htmlPluginConfig = {
    template : './src/index.html' , /* 指定模板文件 */
    filename : 'index.html' /* 指定预览页面文件名称 */
}

let htmlPlugin = new HtmlWebpackPlugin( htmlPluginConfig );

// 导入 vue-loader 模块并将其解构
let { VueLoaderPlugin } = require( "vue-loader" );
// 创建实例
let vuePlugin = new VueLoaderPlugin();

// 此处采用 CommonJS 方式导出
module.exports = {
    mode:"development",
	// 指定入口
    entry: path.join(__dirname,"./src/source.js"),
	// 指定出口
    output:{
        path: path.join(__dirname,"./dist"), /* 设置路径 */
        filename: "target.js" /*设置文件名*/
    },
    // 配置插件
    plugins : [ htmlPlugin, vuePlugin ] ,
    module: {
        rules: [
            { test:/\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] },
            { test:/\.less$/, use:[ 'style-loader', 'css-loader', 'less-loader' ] },
            { test:/\.scss$/, use:[ 'style-loader', 'css-loader', 'sass-loader' ] },
            { 
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2|otf$/, 
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name]-[hash:8][ext]'
                },
                parser:{
                  dataUrlCondition: {
                      maxSize: 30*1024
                  }
                }
            },
            { test:/\.vue$/, use:['vue-loader'] }
        ]
    }
}